/**
 * 通用的CSS样式
 * @author xupingmao
 * @since 2017/12/16
 * @modified 2022/03/16 18:57:15
 * @filename common.css
 * 命名规范（主要参考bootstrap）: 包含两部分，
 * 1：简单的、望文生义的样式，比如颜色 red, blue等等
 * 2：复杂样式，命名规则为：模块名(可选)-功能外观-子功能外观(可选)-实现方式(可选)-特征或状态(可选)，示例如下：
 *   1. marked-code (marked模块的code组件)
 *   2. marked-img (marked模块的图片组件)
 *   3. list-link（外观是list，通过link实现的）
 *   4. list-item（外观是list，通过div实现的）
 *   5. btn-link   (外观是button，通过link实现的)
 *   6. btn-danger (外观是button，表示危险操作)
 *   7. btn-default (外观是button，默认样式)
 *   8. tab-link  （外观是tab，通过link实现)
 *   9. tab-link-activate (外观是tab，通过link实现，状态是激活)
 *   10. x-dialog-title-box-activate（x模块下的对话框标题，div实现，状态是激活）
 * 
 *  注意：后声明的样式匹配优先级更高
 */

/** marked 样式 **/
.marked-heading {
    /* 避免顶部fixed菜单遮挡 */
    width: 100%;
    font-family: "Microsoft YaHei", "黑体";
}

h1.marked-heading {
    font-size: 24px;
}

h2.marked-heading {
    font-size: 20px;
}

h3.marked-heading {
    font-size: 16px;
}

.marked-img {
    text-align: center;
}

.marked-contents {
    width: 100%;
    border: 1px solid #ccc;
    margin-bottom: 10px;
}

.marked-contents-title {
    display: inline-block;
    padding: 5px;
}

.marked-contents h1 {
    text-align: center;
    margin: 0px;
    padding: 0px;
    font-size: 20px;
}

.marked-code {
    width: 100%;
    background-color: #000;
    color: #fff;
    padding: 0.5rem;
    border: 1px solid #ddd;
    word-wrap: break-word;
    white-space: pre-wrap;
    margin: 0px;
}

.marked-codespan {
    padding-left: 4px;
    padding-right: 4px;
    margin: 0;
    /* background-color: rgba(27,31,35,.05); */
    background-color: pink;
    border-radius: 4px;
    padding: 3px;
    line-height: 23px;
}

.marked-strong {
    color: red;
}

.marked-strong>a {
    color: red;
}

/** 标题样式 **/
.heading {
    margin: 0px 0px 10px 0px;
    padding: 5px;
    display: block;
    float: left;
    width: 100%;
    font-size: 16px;
    background: #eee;
    border-left: 5px solid #039BE5;
}

/** label **/
.label {
    display: inline-block;
    width: 100px;
}

.btn-link, .button-link {
    text-decoration: none;
    cursor: pointer;
}

.btn-link:hover, .button-link:hover {
    background: #ccc;
}

.link, .black-link, .link2 {
    margin-right: 5px;
    cursor: pointer;
}

.link {
    /*color: #37a; */
    color: #08c;
}

.black-link {
    color: black;
}

.link2 {
    color: black;
}

.link2:hover {
    color: gray;
}

.path-link, .default-path-link {
    line-height: 28px;
    color: #000;
}

.path-link:hover, .default-path-link:hover {
    color: #888;
}

.default-path-link {
    color: #08c;
}

.danger-link {
    color: red;
}

.selected-link {
    /*border-bottom: 2px solid red;*/
    color: red;
}

/* 高对比度link */
.contract-link {
    display: block;
    color: #08c;
    line-height: 20px;
    float: left;
    margin: 3px;
    padding: 3px;
    text-decoration: none;
}

.contract-link:hover {
    color: white;
    background-color: #08c;
    text-decoration: none;
}

/* 菜单的链接样式 */
.nav-item>a, .menu-link {
    color: white;
    padding: 3px 5px;
    text-decoration: none;
    font-size: 16px;
}

.nav-item>a:hover, .menu-link:hover {
    text-decoration: underline;
}


.line-td {
    border-top: none;
    border-left: none;
    border-right: none;
}

/** 列表样式 **/
.list-item, .list-link {
    width: 100%;
    padding: 10px 5px;
    margin-top: 0px;
    margin-bottom: 0px;
    float: left;
    line-height: 25px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.list-item:last-of-type, .list-link:last-of-type {
    border-bottom: none;
}

.list-item:hover, .list-link:hover {
    background-color: #eee;
}

.list-link i, .list-item i {
    color: black;
}

.list-item-badge {
    color: #888;
}

/** 以下为具体场景下的样式 **/
.menu-selected {
    background: #0088cc;
    color: #fff;
}

/** 侧边栏样式 **/
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
  color: #fff;
  background-color: #428bca;
}

.hide, .hidden {
    display: none;
}

.hidden-file {
    display: none;
}

.tool-div {
    font-size: medium;
}

.tool-div a {
    font-size: medium;
    color: blue;
}

.tool-description {
    font-size: small;
    padding-top: 3px;
}

.xnote-menu {
    padding-left:0;
}

li.menu-item {
    float: left;
    display: block;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
}

li.menu-active {
    padding-bottom: 3px;
    border-style: solid;
    border-color: #99cc33;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-bottom-width: 2px;
}

li.menu-item a {
    text-decoration: none; 
    color: #fff;
}

li.menu-item a:hover {
    background-color: inherit;
}

li.menu-item:hover {
    background-color: #777;
}

/** base START **/

.header {
  width: 100%;
  background-color: #eee;
  position: fixed;
  left: 0px;
  top: 0px;
}


.root {
    /*    
    padding-bottom: 10px;
    width: 1000px;
    height: 100%;
    overflow: hidden;
    margin-left: 0px;
    margin: 0 auto;
    */
}

.nav {
    float: left;
    width: 100%;
    background-color: #515865;
}

.nav-container {
    float: left;
    width: 1000px;
    padding-left: 10px;
    padding-right: 10px;
}

.nav-left {
    display: none;
}

.x-center {
    /* 具体样式由 base_layout.html 脚本动态调整 */
}

.x-center.dev-info {
    padding-left: 10px;
    padding-right: 10px;
}

.x-left {
    display: none;
}

.x-body {
    float: left;
    width: 100%;
    margin: 0 auto;
    margin-top: 10px;
    min-height: 400px;
    /*padding: 0px 10%;*/
}

.footer {
    float: left;
    color: #fff;
    background-color: #515865;
    width: 100%;
    font-size: 14px;
}

.nav-top {
  width: 100%;
  float: left;
  margin-top: 40px;
}

.nav-top * {
  margin: 0px;
  padding: 0px;
  color: black;
}

.nav-top h1 {
  font-family: "monospace Consolas";
}

.nav-top ul {
  height: 30px;
  width: 100%;
  padding-left: 10px;
}

.nav-top li {
  display: block;
  float: left;
  padding: 5px;
}

.nav-left-search {
    float: left;
    padding: 10px;
    display: none;
    padding-bottom: 0px;
}

.nav-search-input {
    width: 100%;
    height: 30px;
    outline: none;
    padding-left: 5px;
    padding-right: 30px;
    float: left;
    display: block;
    border: 1px solid #ccc;
}


.nav-search {
    width: 345px;
    float: right;
    padding: 10px 0px;
}

.navMenu-top { 
  padding: 10px; 
  color: #fff; 
  border-bottom: 1px solid rgba(255,255,255,.1) 
}

.notice {
    border: 1px solid #ccc;
    background-color: #cef2e0;
    margin-top: 3px;
    margin-bottom: 3px;
    padding-left: 3px;
}

.form-control {
    width: 100%;
}


/** file-list样式 END **/

.green-text {
    color: green;
}

.green-bg {
    color: #fff;
    background-color: green;
}

.red-bg {
    background-color: red;
}

.red-text {
    color: #f00;
}

.blue-text {
    color: #00f;
}

.center-text {
    text-align: center;
}

.gray-text {
    color: #888;
}

.error {
    padding: 5px;
    background-color: #f2dede;
    margin: 0px;
}

.warn {
    margin: 0px;
    padding: 5px;
    background-color: #ffc;
}

.info {
    padding: 5px;
    background-color: #C1FFC1;
    margin: 0px;
}

.info.light {
    background-color: #eee;
}

.success {
    padding: 5px;
    margin: 0px;
    background-color: #cf9;
}

.x-dialog {
    display: none;
    position: fixed;
    margin: 0 auto;
    background-color: #fff;
    z-index: 100;
    overflow-y: hidden;
}

.x-dialog-title {
    margin: 0 auto;
    width: 100%;
    background-color: #214FA3;
    color: #fff;
    padding: 5px;
    cursor: move;
    height: 36px;
    line-height: 26px;
}

.x-dialog-body {
    float: left;
    width: 100%;
    overflow-y: auto;
}

.x-dialog-background {
    display: none;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
}

.background {
    display: none;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.5;
}

.x-dialog-ajax {
    display: block;
}

.x-dialog-close {
    background-color: red;
    float: right;
    border: none;
    margin-top: 0px;
    border: 1px solid transparent;
}

.x-dialog-close:hover {
    border: 1px solid black;
}

.dialog-close-btn {
    float: right;
    padding-left: 5px;
    padding-right: 5px;
    color: #fff;
    cursor: pointer;
    line-height: 30px;
}

.dialog-close-btn:hover {
    background-color: red;
}

.dialog-title-btn {
    float: left;
    padding-left: 5px;
    padding-right: 5px;
    color: #fff;
    cursor: pointer;
    line-height: 30px;
}

.dialog-title-btn:hover {
    background-color: gray;
}


.dialog-title {
    float: left;
    width: 100%;
    height: 30px;
    background-color: #3c3333
}

.dialog-iframe {
    float: left;
    width: 100%;
    height: 100%;
    border: none
}


.no-border tr td {
    border: none;
}


#searchBox {
    margin-bottom: 5px;
}

.search-input {
    float: left;
    height:40px;
    padding-left: 10px;
    padding-right: 40px;
    width: 100%;
    max-width: 500px;
    outline: none;
    box-sizing: border-box;
}

.search-btn {
    float: left;
    right: 10px;
    background: #355380; 
    color: #fff; 
    border: none;
    border-radius:0px;
    /*max-width:25%;*/
    width: 40px;
    height: 40px;
    margin-left: -40px;
}

.item-option {
    color: #aaa;
    cursor: pointer;
    font-size: 12px;
}

.item-option:hover {
    color: #000;
    background: none;
    text-decoration: underline;
}

.fs-path {
    float: left;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
    background-color: #eee;
}

.fs-file {
    color: black;
    cursor: pointer;
}

.fs-folder {
    color: blue;
}

/** 知识库列表样式 **/
#fileTable td {
    border-top: none;
    border-left: none;
    border-right: none;
}

.group-link {
    color: #08c;
}

.grid-title, .card-title {
    width: 100%;
    float: left;
    border-left: 5px solid #039BE5;
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: arial,"Sim Sun";
    font-size: 14px;
    font-weight: normal;
    overflow: initial;
    padding-left: 5px;
}

.card-title-2 {
    padding: 5px;
    margin: 0px;
    background-color: #eee;
}

.grid-row {
    width: 100%;
    float: left;
}

.grid-link {
    display: block;
    float: left;
    width: 220px;
    padding: 5px;
    margin: 5px;
    margin-top: 0px;
    margin-bottom: 0px;
    line-height: 25px;
}

.grid-link:hover {
    background: #eee;
}

.grid-item {
    width: 20%;
    padding: 5px;
    /*margin: 5px;*/
    margin-top: 0px;
    margin-bottom: 0px;
    float: left;
    line-height: 25px;
}

.group-div {
    width: 220px;
    padding: 5px;
    margin: 5px;
    margin-top: 0px;
    margin-bottom: 0px;
    /*border: 1px solid #ccc;*/
    box-sizing: border-box;
    float: left;
    line-height: 25px;
}

.group-div:hover {
    background-color: #eee;
}

.children-count {
    float: right;
}

.note-link {
    color: #08c;
}

.scroll-y {
    overflow-y: auto;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.align-right {
    text-align: right;
}

.align-center {
    text-align: center;
}

.small-font {
    font-size: small;
}

.code {
    font-family: Consolas, monospace;
}

.nav-ul {
    display: block;
    float: left;
    list-style: none;
    padding-left: 0px;
    margin: 0px;
    line-height: 50px;
}

.nav-item {
    padding-right: 5px;
    display: block;
    float: left;
}

.keyword {
    color: blue;
}

.output-title {
    width: 100%;
    border: 1px solid #ccc;
    padding-left: 5px;
    margin-top: 5px;
}

.output-body {
    border: 1px solid #ccc;
    padding: 4px;
    background-color: #eee;
    box-sizing: border-box;
    margin: 0px;
    border-top: none;
    font-family: consolas, monospace;
}


.bot-btn {
    position: fixed;
    bottom: 50px;
    width: 50px;
    height: 40px;
    font-size: 14px;
    background-color: #00c1de;
    cursor: pointer;
    border-radius: 5px;
    color: #fff;
    padding: 10px;
    z-index: 100;
    opacity: 0.8
}

.border {
    border: solid 1px #ccc;
}

.main-content {
    float: left;
    width: 1000px;
    min-height: 20px;
    padding: 10px;
    background-color: #fff;
}

.main-content-bg {
    background-color: #fff;
}

.aside {
    float: left;
    width: 220px;
    margin-left: -220px;
    display: none;
}

.aside-item {
    background-color: white;
    border: 1px solid #ccc;
    width: 100%;
    float: left;
    margin-bottom: 10px;
}

.aside-item li {
    list-style: none;
    line-height: 20px;
}

.aside-title {
    border-bottom: 1px solid #ccc;
    /*background-color: #efefef;*/
    padding: 5px;
}

.aside-content {
    margin: 5px;
}

.aside-content ul {
    margin: 0px;
    padding: 0px;
}

.aside-content li {
    display: block;
    width: 100%;
}

/** 颜色属性 **/
.red {
    color:red;
}

.black {
    color: black;
}

.orange {
    color: orange;
}

.green {
    color: green;
}

.gray {
    color: gray;
}

.small-device {
    display: none;
}

.grid-card, .card, .box {
    float: left;
    width: 100%;
    background-color: #fff;
    margin-bottom: 10px;
}

.card.btn-line-height {
    padding-left: 10px;
}

.transparent-card {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

.x-photo {
    cursor: pointer;
}

.no-outline {
    outline: none;
}

/** 滚动条样式 **/
.scrollbar::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 10px;
    height: 10px;
    background-color: #eee;
}

.scrollbar::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    background-color: #999;
}


.scrollbar::-webkit-scrollbar-track { 
    /*滚动条里面轨道*/
    /*border-radius: 10px; */
    /*background: #eee; */
} 

.x-option-dialog div.layui-layer-content {
    padding: 10px;
}


.light-bottom-border {
    border-bottom: 1px solid #eee;
}

select.no-border {
    border: none;
}

.split-title {
    width: 100%;
    float: left;
    background-color: #eee;
    padding: 5px;
    margin-bottom: 5px;
    font-weight: bold;
    line-height: normal;
}

.search-out-box {
    float: left;
    width: 100%;
    padding-bottom: 10px;
}

/* 高优先级样式 */
.col-md-1{float:left;width:8.3%;}
.col-md-2{float:left;width:16.7%;}
.col-md-3{float:left;width:25%;}
.col-md-4{float:left;width:33.3%;}
.col-md-5{float:left;width:41.7%;}
.col-md-6{float:left;width:50%;}
.col-md-7{float:left;width:58.3%;}
.col-md-8{float:left;width:66.7%;}
.col-md-9{float:left;width:75%;}
.col-md-10{float:left;width:83.3%;}
.col-md-11{float:left;width:91.7%;}
.col-md-12{float:left;width:100%;}
.col-md-offset-12{margin-left:100%;}
.col-md-offset-11{margin-left:91.66666666666666%;}
.col-md-offset-10{margin-left:83.33333333333334%;}
.col-md-offset-9{margin-left:75%;}
.col-md-offset-8{margin-left:66.66666666666666%;}
.col-md-offset-7{margin-left:58.333333333333336%;}
.col-md-offset-6{margin-left:50%;}
.col-md-offset-5{margin-left:41.66666666666667%;}
.col-md-offset-4{margin-left:33.33333333333333%;}
.col-md-offset-3{margin-left:25%;}
.col-md-offset-2{margin-left:16.666666666666664%;}
.col-md-offset-1{margin-left:8.333333333333332%;}
.col-md-offset-0{margin-left:0;}
.top-offset-1{margin-top:5px;}
.top-offset-2{margin-top:10px;}
.bottom-offset-1{margin-bottom:5px;}
.bottom-offset-2{margin-bottom:10px;}
.row{float: left;width: 100%;overflow: auto;}
.pad5 {padding: 5px;}
.pad10 {padding: 10px;}
.pad-top-5 {padding-top: 5px;}
.pad-top-10 {padding-top: 10px;}
.pad-left-5 {padding-left: 5px;}
.pad-bottom-5 {padding-bottom: 5px;}
.pad-bottom-10 {padding-bottom: 10px}
.margin-top-5 {margin-top: 5px;}
.margin-top-10 {margin-top: 10px;}
.margin-bottom-5 {margin-bottom: 5px;}
.margin-bottom-10 {margin-bottom: 10px;}
